<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <!--fonts-->
    <link href='http://fonts.googleapis.com/css?family=Philosopher:400,400italic|Comfortaa&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
    <!--vendor css-->
<!--    <link rel="stylesheet" href="./css/">-->
    <!--app css -->
    <link rel="stylesheet" href="./css/main.css">
</head>
<body>
    <div id="wrapper">
        <div class="home-white-bg">
            <header id="header" class="cf">
                    <div id="menu-buttons-left">
                        <a href="" id="home-button"></a>
                        <a href="" id="menu-button">Menu</a>
                    </div>
                    <nav id="left-nav">
                        <ul class="cf">
                            <li><a href="">продукти</a></li>
                            <li><a href="">къде да купим</a></li>
                        </ul>
                    </nav>
                    <div id="logo">
                        <a href="">
                            <img src="./image/logo.png" alt="">
                        </a>
                    </div>
                    <nav id="right-nav">
                        <ul class="cf">
                            <li><a href="">за нас</a></li>
                            <li><a href="">как да...</a></li>
                        </ul>
                    </nav>
                    <div id="menu-buttons-right" class="cf">
                        <div id="search-button">
                            <a></a>
                        </div>
                        <div id="lang-button">
                            <div>
                                <span class="lang-active">bg</span>
                                <span id="lang-select">
                                    <a href="">en</a>
<!--                                    <a href="">de</a>-->
                                </span>
                            </div>
                        </div>
                    </div>
                </header> <!--#header -->
                <div id="search-slide" class="cf">
                    <div id="search-close-button"><span></span></div>
                    <div id="search-input-container">
                        <input type="text" id="search-field" placeholder="търсене">
                    </div>
                    <ul id="search-results" class="cf">

                    </ul>
                </div> <!--#search-slide-->
    <div id="container" class="container">
       <div class="noise">
            <ul id="scene" class="scene">
                <li class="layer" data-depth="0.23"><img src="image/layer1.png"></li>
                <li class="layer" data-depth="0.16"><img src="image/layer2.png"></li>
                <li class="layer" data-depth="0.13"><img src="image/layer3.png"></li>
                <li class="layer" data-depth="0.10"><img src="image/layer4.png"></li>
            </ul>
            <div class="white"></div>
        </div>
    </div>
    <div id="inner-wrapper">
        <div id="front-container">
            <div id="popup-container" class="cf panel flip-container">
                <div class="flipper">
                <div id="popup-sun" class="front cf">
                    <h2>слънчеви очила</h2>
                    <a href="">
                        <img src="./image/product-image.jpg" alt="" class="series">
                        <h3>comfort</h3>
                    </a>
                    <a href="">
                        <img src="./image/product-image.jpg" alt="" class="series">
                        <h3>exclusive</h3>
                    </a>
                    <a href="">
                        <img src="./image/product-image.jpg" alt="" class="series">
                        <h3>chic</h3>
                    </a>
                    <a href="">
                        <img src="./image/product-image.jpg" alt="" class="series">
                        <h3>limited</h3>
                    </a>
                    <a href="">
                        <img src="./image/product-image.jpg" alt="" class="series">
                        <h3>junior</h3>
                    </a>   
                </div> <!--#popup-sun-->
                <div id="popup-dio" class="back cf">
                    <h2>диоптрични очила</h2>
                    <a href="">
                        <img src="./image/product-image.jpg" alt="" class="series">
                        <h3>comfort</h3>
                    </a>
                    <a href="">
                        <img src="./image/product-image.jpg" alt="" class="series">
                        <h3>exclusive</h3>
                    </a>
                    <a href="">
                        <img src="./image/product-image.jpg" alt="" class="series">
                        <h3>chic</h3>
                    </a>
                    <a href="">
                        <img src="./image/product-image.jpg" alt="" class="series">
                        <h3>limited</h3>
                    </a>
                    <a href="">
                        <img src="./image/product-image.jpg" alt="" class="series">
                        <h3>junior</h3>
                    </a>
                </div> <!--#popup-dio-->
                </div> <!--#flipper-->
            </div> <!--#popup-container-->
            <div id="selector-type-container">
                <div class="selector-type">
                    <div id="selector-type-sun">
                        <img src="./image/glasses-sun.png" alt="">
                    </div>
                    <h3>слънчеви</h3>
                </div>
                <div class="selector-type">
                    <div id="selector-type-dio">
                        <img src="./image/glasses-dio.png" alt="">
                    </div>
                    <h3>диоптрични</h3>
                </div>
            </div> <!--#selector-container-->
        </div> <!--#front-container-->       
        <section id="home-content-container" class="cf">
            <article>
                <header>
                    <h3>какво ново</h3>
                </header>
                <img src="./image/article-image.png" alt="">
                <p class="article-resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum ullam quidem vitae perferendis, rem, tenetur fugiat placeat aliquam, illo facilis, distinctio sed itaque. Aut, quaerat eos aperiam, qui officiis debitis.</p>
                <a href="" class="article-continue">виж още</a>
            </article>
            <article>
                <header>
                    <h3>полезно и приятно</h3>
                </header>
                <img src="./image/article-image.png" alt="">
                <p class="article-resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit deleniti rerum quo aliquam animi esse, quos dolor? Odit vitae illum, numquam, harum perspiciatis, quia dolore ipsum veritatis voluptates cumque architecto?</p>
                <a href="" class="article-continue">виж още</a>
            </article>
            <article>
                <header>
                    <h3>социална отговорност</h3>
                </header>
                <img src="./image/article-image.png" alt="">
                <p class="article-resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, ab vitae tenetur est aperiam unde recusandae voluptatibus. Temporibus, modi? Blanditiis corporis nulla asperiores provident perferendis unde distinctio molestias est illo.</p>
                <a href="" class="article-continue">виж още</a>
            </article>
        </section> <!--#home-content-container-->
              </div> <!--#inner-wrapper-->
        </div> <!--#home-white-bg-->
         <div id="footer-container">
            <footer class="cf">
                <div id="footer-left">
                    <div class="footer-top">
                        <p>&copy; 2014 <span id="brand-copy">KWIAT</span> Всички права запазени. <br> <a href="">Общи условия и поверителност.</a></p>
                    </div>
                    <div class="footer-bottom cf" id="login-button-container">
                        <a href="" id="footer-login"></a>
                        <p>Вход за <br> партньори</p>
                    </div>
                </div> 
                <div id="footer-center">
                    <img src="./image/footer-flower.png" alt="">
                </div>
                <div id="footer-right">
                    <div class="footer-top">
                        <a href="" id="win">Спечели с Квият <span id="label-new">ново</span></a>
                        <a href="">Контакти</a>
                    </div>
                    <div class="footer-bottom" id="social-icons">
                        <ul  class="cf">
            <!--                            <li><a href="./image/footer-twitter.png" id="twitter-icon"></a></li>-->
                            <li><a href="./image/footer-p.png" id="some-icon"></a></li>
                            <li><a href="./image/footer-facebook.png" id="fb-icon"></a></li>
                        </ul>
                    </div>
                </div>
            </footer>
        </div>
    </div> <!--# wrapper-->
    
    <!--vendor js-->
<!--    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>-->
    <script src="lib/jquery-1.11.1.min.js"></script>
    <script src="./lib/parallax.min.js"></script>
    
    <script>
        $(function(){
            
            var scene = document.getElementById('scene');
	        var parallax = new Parallax(scene);
        
        });

    </script>
    
    <script src="./lib/masonry.pkgd.min.js"></script>
    <!--app js-->
    <script src="./js/main.js"></script>
</body>
</html>